<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作 {四种方式10个属性} 
		   1.控制字体： font-family font-size font-weight 
		   2.控制文本布局：text-align line-height letter-spacing word-spacing
		   3.文本修饰效果：text-decoration text-shadow 
		   4.处理文本效果：white-space
		-->
		<style>
		 /* css3语法：选择器 {
			            属性：属性值;
			            属性：属性值;
						......
	                        }  叫法：一个样式
		 */
		bo dy div#kk{
			color: skyblue;
			
			/* 知识点1：文本格式化属性控制字体 
			 font-family: 字体家族，指定字体形式
			*/
			font-family: 华文彩云;
			/* 设置多个字体： 浏览器会按照顺序寻找可用字体
			  用户体验，用户系统有什么字体，优先指定字体
			   通常与通配选择器使用  *{}
			 */
			
			
			/* 知识点2：文本格式化属性控制字体
			    font-size:字体大小属性，与单位共存
				单位  px 像素  使用特点：绝对值，pc端
				     /em 相对单位，理解：倍数  使用特点：相对于父元素按照倍数方式，移动端
			 
			 */
			font-size: 2em;
			
			
			/* 知识点3：文本格式化属性控制字体
			  font-weight:字体粗细属性，不存在单位
			         属性值： 数值 【100 200 300 ...。900】
					            单词【normal==400，bold，light 】
			使用方法：通配选择器搭配使用：指定全局字体正常字体粗细
			 */
			font-weight: 700;
			/* 补充：1.英文大写 2.首字母大写 3.段落开始间距200px */
			 text-transform: uppercase;
			 text-transform: capitalize;
			 word-spacing: 200px;
			 text-indent: 200px;
		}
		
		div#kk{
			color: skyblue;
			/* 知识点4：文本格式化属性控制文本格式【对齐，间隙】
			   text-align: 文本对齐属性
				 legt right center justify(两端对齐)，用于弹性布局
			 */
			text-align: justify;
			
			
			/* 
			 知识点5：文本格式化属性控制文本格式【对齐，间隙】
			 行高属性line-height:文本垂直效果
			 使用方式：1.高度属性: 属性值一致
			          2.在高度属性上加行高属性：属性值一致
			 
			 */
			border: 1px solid skyblue;
			height: 100px;
			line-height: 100px;
			/* 补充：文本对齐和行高属于对齐|间隙，字符和单词之间距离 */
			
			
			/* 知识点6：Letter-spacing:设置字符之间的间隙
			   知识点7：word-spacing:设置单词之间间隙
			 */
			lett er-spacing: 7px;
			word-spacing: 10px;
		}
       
		div #kk{  /* 通过加权方式，锁定元素  */
			 color: aqua;
               }   
			
		
		
	   a.k1{/* 权值：11 */
		   /* 知识点8：text-decoration 修饰超链接样式
		     使用方法：与通配符一起使用，设置全局页面超连接样式
			  属性值：none（删除下划线）|underline|line-through(删除线)
		   */
		  text-decoration: line-through;
		  
		 
		  /* 知识点9：text-shadow 修饰文本阴影
		      属性值：X轴  Y轴  blur模糊  color
		  */
		 text-shadow: 3px 3px 3px skyblue;
		 }	
		 
		 p{
			 border: 1px solid red;
			  /* 知识点10：文本换行效果
			    white-space 文本换行属性
			      属性值：nowrap(不换行),只显示一行，超出部分隐藏
				  |pre(保存空格和回车)|normal(空格合并，换行隐藏)
			  
			  */
			 white-space: nowrap;
			 overflow: hidden;
		 }
		</style>
	</head>
	
	<body>
		<div id="kk">Lorem ipsum dolor !</div>
		<hr>
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点8：text-decoration属性:设置超链接效果
		 -->
		<a  class="k1"  href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
            <div style="height: 700px;">  </div>
			<marquee >
				<h4>处理文本效果</h4>
			</marquee>
			<p>Lor  
				em ipsum dolo
			r sit amet consectetur adipisicing elit. Asperiores, quas dolor repellat numquam excepturi officiis magnam deleniti eos neque vel debitis veritatis maxime suscipit, esse rem officia aliquid ad. Ipsam.</p>
				
		
	</body>
</html>